<template>
	<view>
		<u-mask :show="loading" :custom-style="{background: 'rgba(0, 0, 0, 0)'}">
			<view class="warp">
				<u-loading mode="flower"></u-loading>
			</view>
		</u-mask>
		<u-navbar :is-back="false" :border-bottom="false">
			<template>
				<view style="font-size: 40rpx;margin-left: 20rpx;">{{this.$title}}</view>
			</template>
			<template slot="right">
				<u-icon name="weixin-fill" size="40" color="#b9b9b9" style="margin-right: 20rpx;"></u-icon>
				<u-icon name="server-fill" size="40" color="#b9b9b9" style="margin-right: 20rpx;"></u-icon>
				<u-icon name="share" size="40" color="#b9b9b9" style="margin-right: 20rpx;" @click="share"></u-icon>
			</template>
		</u-navbar>
		<view>
			<u-tabs :list="q_b_type_list" name="cate_name" :is-scroll="false" :current="q_b_type_key"
			 @change="q_b_type_change" active-color="#65a4f8"></u-tabs>
		</view>
		<view class="ad">
			<u-swiper :list="ad_list" name="pic" @click="to_web"></u-swiper>
		</view>
		<view class="center">
			<scroll-view scroll-x="true">
				<view class="center_view" v-for="(item,key) in center_list" :key="key">
					<u-icon :name="item.pic" size="90" :label="item.name" label-pos="bottom"></u-icon>
				</view>
			</scroll-view>
		</view>
		<view class="center">
			<scroll-view scroll-x="true">
				<view class="center_ad_view" v-for="(item,key) in center_ad_list" :key="key">
					<image class="center_ad_view_img" style="width: 95%;" mode="widthFix" :src="item.pic"></image>
				</view>
			</scroll-view>
		</view>
		<view>
			<u-tabs :list="q_b_type_children_list" name="cate_name" :is-scroll="false" 
			:current="q_b_type_children_key" @change="q_b_type_children_change"></u-tabs>
		</view>
		<view class="qus">
			<u-cell-group>
				<u-cell-item v-for="(item,key) in qus_list" :key="key" :arrow="false">
					<template slot="icon">
						<image style="width: 110rpx;height: 110rpx;border-radius: 50%;" @click="to_detail(item.id,item.title)" :src="item.image"></image>
					</template>
					<template slot="title">
						<view style="margin-left: 30rpx;" @click="to_detail(item.id,item.title)">
							<view style="font-size: 30rpx;font-weight:900">{{item.title}}</view>
							<view style="font-size: 15rpx;">{{item.keyword}}</view>
							<view style="font-size: 10rpx;">
								<text style="color: #F0AD4E;">{{item.class_hour}}</text>课时 {{item.view_user_number}}人听课
							</view>
						</view>
					</template>
					<template slot="right-icon">
						<u-icon v-if="item.is_collect" name="star-fill" color="#F0AD4E" size="35" @click="del_relation(item.id)"></u-icon>
						<u-icon v-else name="star" color="#b9b9b9" size="35" @click="add_relation(item.id)"></u-icon>
					</template>
				</u-cell-item>
			</u-cell-group>
		</view>
		<u-tabbar v-model="current" :list="this.$tabBarList" :mid-button="true" active-color="#65a4f8" inactive-color="#b9b9b9"></u-tabbar>
		<uni-popup ref="sharepopup" type="bottom">
			<share-btn :sharedataTemp="sharedata"></share-btn>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: mapState(['uerInfo']),
		data() {
			return {
				loading: true,
				current: 2,
				q_b_type_list: [],
				q_b_type_key: 0,
				q_b_type_children_list: [],
				q_b_type_children_key:0,
				ad_list:[],
				center_list:[],
				center_ad_list:[],
				qus_list:[],
				sharedata:{
					strShareUrl:this.$download_path,
					strShareTitle:`${this.$title}`,
					strShareSummary:'',
					strShareImageUrl:this.$share_image_path
				}
			}
		},
		onShow() {
			this.get_category();
		},
		mounted() {
			this.sharedata.strShareUrl += this.uerInfo.uid;
			this.init();
		},
		methods: {
			init:function(){
				//获取一级导航
				this.get_category();
				//获取轮播图
				uni.request({
					url: `${this.$serverUrl}/ad_list`,
					header: {
						"Content-Type": "application/json"
					},
					method: "GET",
					success: (e) => {
						if (e.data.status == 200) {
							this.ad_list = e.data.data;
						} else {
							this.$toast_fail(e.data);
						}
					},
					fail: (e) => {
						this.$toast_fail({msg:"请求失败"});
					}
				});
				//获取导航
				uni.request({
					url: `${this.$serverUrl}/banner_btn_list`,
					header: {
						"Content-Type": "application/json"
					},
					method: "GET",
					success: (e) => {
						if (e.data.status == 200) {
							this.center_list = e.data.data;
						} else {
							this.$toast_fail(e.data);
						}
					},
					fail: (e) => {
						this.$toast_fail({msg:"请求失败"});
					}
				});
				//获取活动
				uni.request({
					url: `${this.$serverUrl}/active_list`,
					header: {
						"Content-Type": "application/json"
					},
					method: "GET",
					success: (e) => {
						if (e.data.status == 200) {
							this.center_ad_list = e.data.data;
						} else {
							this.$toast_fail(e.data);
						}
					},
					fail: (e) => {
						this.$toast_fail({msg:"请求失败"});
					}
				});
			},
			get_category:function() {
				uni.request({
					url: `${this.$serverUrl}/category`,
					header: {
						"Content-Type": "application/json"
					},
					method: "GET",
					success: (e) => {
						this.loading = false;
						if (e.data.status == 200) {
							this.q_b_type_list = e.data.data;
							this.set_q_b_type_children_list(0);
						} else {
							this.$toast_fail(e.data);
						}
					},
					fail: (e) => {
						this.$toast_fail({msg:"请求失败"});
					}
				});
			},
			q_b_type_change: function(index) {
				this.q_b_type_key = index;
				this.set_q_b_type_children_list(index);
			},
			set_q_b_type_children_list:function(index){
				var data = JSON.parse(JSON.stringify(this.q_b_type_list));
				this.q_b_type_children_list = data[index]['children'];
				if(data[index]['children'].length > 0){
					this.get_class_list(data[index]['children'][0]['id']);
				}
			},
			q_b_type_children_change:function(index){
				this.q_b_type_children_key = index;
				var data = JSON.parse(JSON.stringify(this.q_b_type_children_list));
				this.get_class_list(data[index]['id']);
			},
			//获取课程列表
			get_class_list:function(cate_id){
				this.loading = true;
				uni.request({
					url: `${this.$serverUrl}/products`,
					header: {
						"Content-Type": "application/json"
					},
					data: {
						"sid": cate_id,
						"uid": this.uerInfo.uid,
					},
					method: "GET",
					success: (e) => {
						this.loading = false;
						if (e.data.status == 200) {
							this.qus_list = e.data.data;
						} else {
							this.$toast_fail(e.data);
						}
					},
					fail: (e) => {
						this.$toast_fail({msg:"请求失败"});
					}
				});
			},
			//添加收藏
			add_relation:function(class_id){
				this.loading = true;
				uni.request({
					url: `${this.$serverUrl}/collect/add`,
					header: {
						"Content-Type": "application/json"
					},
					data: {
						"id": class_id,
						"uid": this.uerInfo.uid,
						"token": this.uerInfo.token
					},
					method: "POST",
					success: (e) => {
						this.loading = false;
						this.qus_list.find(function(v){
							if(v.id == class_id){
								v.is_collect = 1;
							}
						});
					},
					fail: (e) => {
						this.$toast_fail({msg:"请求失败"});
					}
				});
			},
			//取消收藏
			del_relation:function(class_id){
				this.loading = true;
				uni.request({
					url: `${this.$serverUrl}/collect/del`,
					header: {
						"Content-Type": "application/json"
					},
					data: {
						"id": class_id,
						"uid": this.uerInfo.uid,
						"token": this.uerInfo.token
					},
					method: "POST",
					success: (e) => {
						this.loading = false;
						this.qus_list.find(function(v){
							if(v.id == class_id){
								v.is_collect = 0;
							}
						});
					},
					fail: (e) => {
						this.$toast_fail({msg:"请求失败"});
					}
				});
			},
			share:function(){
				this.$refs.sharepopup.open();
			},
			to_detail:function(id,title){
				uni.navigateTo({
					url:'detail?pruduct_id='+id
				})
			},
			to_web:function(i){
				uni.navigateTo({
					url:'../web/web?title=' + this.ad_list[i]['name'] + '&url=' + this.ad_list[i]['wap_url']
				})
			}
		}
	}
</script>

<style>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	.ad {
		padding: 15rpx 40rpx;
	}
	.center {
		padding: 15rpx 40rpx;
		white-space: nowrap;
	}
	.center_view {
		width: 30%;
		display: inline-block
	}
	.center_ad_view {
		width: 48%;
		display: inline-block;
	}
	.center_ad_view_img {
		border-radius: 15rpx;
	}
	.qus {
		padding: 15rpx 40rpx;
	}
</style>
